<template>
  <div>
    <!-- 专门显示单图片新闻 -->
    <!-- 1. type == 1
      2. cover.length >=1 && < 3 -->
    <div
      class="singleNews"
      v-if="
        postData.type == 1 &&
        postData.cover.length >= 1 &&
        postData.cover.length < 3
      "
    >
      <div class="left">
        <div class="title">
          {{ postData.title }}
        </div>
        <div class="info">
          {{ postData.user.nickname }}
          {{
            postData.comments
              ? postData.comments.length
              : postData.comment_length
          }}
          跟帖
        </div>
      </div>
      <!-- <img :src="postData.cover[0].url" alt="" class="cover" /> -->
      <img :src="fnFixImgUrl(postData.cover[0].url)" alt="" class="cover" />
    </div>

    <!-- 专门显示多图片新闻 -->
    <!-- 1. type == 1
      2. cover.length >= 3 -->
    <div
      class="multipNews"
      v-if="postData.type == 1 && postData.cover.length >= 3"
    >
      <div class="title">{{ postData.title }}</div>
      <div class="coversWrapper">
        <img class="cover" :src="postData.cover[0].url" alt="" />
        <img class="cover" :src="postData.cover[1].url" alt="" />
        <img class="cover" :src="postData.cover[2].url" alt="" />
      </div>
      <div class="info">
        {{ postData.user.nickname }}
        {{ postData.comments.length }}
        跟帖
      </div>
    </div>

    <!-- 专门显示视频 -->
    <!-- 1. type == 2
      2. 封面最少有一张 -->
    <div
      class="singleVideo"
      v-if="postData.type == 2 && postData.cover.length >= 1"
    >
      <div class="title">{{ postData.title }}</div>
      <div class="coverWrapper">
        <img :src="postData.cover[0].url" alt="" class="cover" />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="info">
        {{ postData.user.nickname }}
        {{
          postData.comments ? postData.comments.length : postData.comment_length
        }}
        跟帖
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postData"],
  methods: {
    fnFixImgUrl(oldUrl) {
      const reg = /^http/;

      if (reg.test(oldUrl)) {
        return oldUrl;
      } else {
        return this.$axios.defaults.baseURL + oldUrl;
      }
    },
  },
  filters: {
    fixImgUrl(oldUrl) {
      // 我不确定后台给我返回到底是完全的图片路径
      // 还是想头像一样, 返回相对路径
      // 1. 创建正则校验
      const reg = /^http/;

      // 过滤器本身是一个纯函数
      // 不依赖当前的程序状态
      // 固定的输入, 一定有相同的输出
      // 不产生副作用

      // filter 只是用来转换字符串格式

      //   console.log("这里是局部过滤器");
      //   console.log(this);
      if (reg.test(oldUrl)) {
        return oldUrl;
      } else {
        return "http://127.0.0.1:3000" + oldUrl;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.singleNews {
  display: flex;
  padding: 10/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .cover {
    width: 120/360 * 100vw;
    height: 76/360 * 100vw;
    object-fit: cover;
  }
  .left {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .title {
      font-size: 16/360 * 100vw;
      color: #333;
    }
    .info {
      font-size: 14/360 * 100vw;
      color: #888;
    }
  }
}

.multipNews {
  padding: 10/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .coversWrapper {
    display: flex;
    justify-content: space-between;
    padding: 10/360 * 100vw 0;
    .cover {
      width: 112/360 * 100vw;
      height: 74/360 * 100vw;
      object-fit: cover;
    }
  }
  .title {
    color: #333;
    font-size: 16/360 * 100vw;
  }
  .info {
    color: #888;
    font-size: 14/360 * 100vw;
  }
}

.singleVideo {
  padding: 10/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 16/360 * 100vw;
    color: #333;
  }
  .info {
    color: #888;
    font-size: 14/360 * 100vw;
  }
  .coverWrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10/360 * 100vw 0;
    .cover {
      width: 100%;
      height: 170/360 * 100vw;
      object-fit: cover;
    }
    .iconshipin {
      position: absolute;
      font-size: 46/360 * 100vw;
      background-color: #dddd;
      color: #fff;
      border-radius: 50%;
    }
  }
}
</style>